<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table的渲染</title>

    <style>
        .container{
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

</head>
<body>
<div class="container">
    <div>
        <select id="sltCity"></select>
        <select id="sltNation"></select>
        <select id="sltSchool"></select>
    </div>
</div>

</body>
<script>
    cities = [
        {
            id:1,
            name:'天津'

        },{
            id:2,
            name:'拉萨'
        },{
            id:3,
            name:'西双版纳'

        }
    ]

    nations = [
        {
            id:1,

            nations:'汉族'

        },{
            id:2,

            nations:'藏族'

        },{
            id:3,

            nations:'傣族'

        }
    ]



    schools = [
        {
            id:1,

            school:'天津大学'
        },{
            id:2,

            school: '西藏大学'
        },{
            id:3,

            school:'云南大学'
        }
    ]
    window.onload = function () {
    initSltCity();
    initSltNation();
    initSltSchool();

}


function initSltCity() {
    var sltCity = document.getElementById('sltCity');


    for (var key in cities){
        var opt = document.createElement('option');
        opt.value = cities[key].id;
        opt.innerText = cities[key].name;

        sltCity.appendChild(opt);
    }
}
opt.appendChild(cities);
function initSltNation() {
    var sltNation = document.getElementById('sltNation');


    for (var key in nations){
        var opt = document.createElement('option');
        opt.value = nations[key].id;
        opt.innerText = nations[key].nations;

        sltNation.appendChild(opt);
    }
}
opt.appendChild(nations);

function initSltSchool(){
    var sltSchool = document.getElementById('sltSchool');
    for (var key in schools){
        var opt = document.createElement('option');
        opt.value = schools[key].id;
        opt.innerText = schools[key].school;

        sltSchool.appendChild(opt);
    }
}

opt.appendChild(schools);</script>
</html>